import {
	Primary,
	Controls,
	Stories,
	Meta,
	ArgTypes,
} from '@storybook/addon-docs/blocks';

# useModal

## openDialog

Dialog component's purpose is to display simple feedback like success and error messages. Or request confirmation for example before deleting some content. Import `useModal` composable and use the openDialog() method to create a dialog. Check [Dialog](../?path=/docs/components-dialog--docs) component for more details on available props.

```html
<template>
	<PkpButton @click="openWarningDialog">Open Dialog</PkpButton>
</template>

<script setup>
	import {useModal} from '@/composables/useModal';

	const {openDialog} = useModal();

	function openWarningDialog() {
		openDialog({
			title: 'Submit Article',
			message: 'Are you sure you want to submit this article?',
			actions: [
				{
					label: 'Yes',
					isPrimary: true,
					callback: (close) => {
						// user has confirmed
						close();
					},
				},
				{
					label: 'No',
					isWarnable: true,
					callback: (close) => {
						// user has cancelled. close the modal
						close();
					},
				},
			],
			close: () => {
				// dialog has been closed
			},
			modalStyle: 'primary',
		});
	}
</script>
```

## openSideModal

SideModal should be created as separate component, follow examples from [SideModal](../?path=/docs/components-sidemodal--docs) component, where `openSideModal()` is also used to control the SideModals.

Once you have the SideModal component created just pass the component as first argument and its props as second argument.

Alternatively its possible to pass component name if its globally registered.

```javascript

<script setup>
	import SummaryModal from '@/pages/submissions/summaryModal.vue'
	const {openSideModal} = useModal();
	function openModal() {
		openSideModal(SummaryModal, {someProp: 5});
	}
</script>

```

### Using openSideModal from Options API Component

Using `openSideModal()` works well also from components that are still created in Options API.

One thing to watch out is reactivity. Most new modals should be used in a way, that are managing its own state and they just return (emit) to the parent, when the modal actions are done. But some of our existing modals have lots of state passed from its parent and its important that modals rerenders as this state changes. With composition API, this works perfectly fine out of the box because we define all the state via `refs`. But when for example boolean is passed (this.isSaving), it just passes the value and modal can't track the changes. This can be compensated by wrapping it as computed property in example below.

```javascript

openVersionModal() {
	const {openSideModal} = useModal();
	openSideModal(DoiItemVersionModal, {
		isSaving: computed(() => this.isSaving),
		isDeposited: computed(() => this.isDeposited),
		item: this.item,
		doiListColumns: this.doiListColumns,
		mutableDois: this.mutableDois,
		isEditingDois: computed(() => this.isEditingDois),
		onSaveDois: this.saveDois,
		onEditDois: this.editDois,
	});
},

```
